<template>
	<div class="compass">
		<img src="@/assets/img/compass/compass-empty.svg" width="250" height="250" v-show="keyType == ''" />
		<img src="@/assets/img/compass/compass-up.svg" width="250" height="250" v-show="keyType == 'up'" />
		<img src="@/assets/img/compass/compass-down.svg" width="250" height="250" v-show="keyType == 'down'" />
		<img src="@/assets/img/compass/compass-left.svg" width="250" height="250" v-show="keyType == 'left'" />
		<img src="@/assets/img/compass/compass-right.svg" width="250" height="250" v-show="keyType == 'right'" />
	</div>
	<div class="compass-pointer">
		<img id="compass-pointer" src="@/assets/img/compass/compass.svg" width="140" height="140" />
	</div>
</template>

<script setup name="MyCompass">
defineProps({
	keyType: String
})
</script>

<style lang="scss" scoped>
.compass {
	width: 100%;
	transform: rotateX(70deg);
	bottom: -30px;
	position: absolute;
	display: flex;
	justify-content: center;
}
.compass-pointer {
	width: 100%;
	transform: rotateX(70deg);
	position: absolute;
	bottom: 28px;
	display: flex;
	justify-content: center;
}
</style>
